<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: guoxiaomin
 * @Email: 1093556028@qq.com
 * @Date: 2019-08-21 14:59:42
 * @LastEditors: guoxiaomin
 * @LastEditTime: 2019-09-12 18:02:27
 -->
<template>
  <div class="home">
    <Search
      :needReset="false"
      class="left"
      :title="searchTitle"
      :searchForm="searchForm"
      @submit="preGetUserList"/>

    <p class="list-title">共找到 <span>{{this.total}}</span> 个用户</p>
    <List
      class="list"
      :title="tableTitle"
      :tableData="tableData"
      :pageSize="rn"
      :pageNum="pn"
      :total="total"
      @changePn="changePn">
    </List>
  </div>
</template>

<script>
import Search from '../components/Search/index'
import List from '../components/List/index'
// import Cookies from 'js-cookie'
export default {
  name: 'home',
  components: {
    List,
    Search
  },
  data() {
    return {
      total: 0,
      pn: 1,
      rn: 20,
      searchTitle: {
        userName: {
          key: 'userName',
          type: 'text',
          value: '姓名',
          placeholder: '请输入姓名'
        },
        phone: {
          key: 'phone',
          type: 'text',
          value: '手机',
          placeholder: '请输入手机号'
        },
        time: {
          key: 'time',
          type: 'timepicker',
          value: '创建时间'
        }
      },
      searchForm: {
        phone: '',
        userName: '',
        time: ''
      },

      tableTitle: [
        {
          type: 'createDate',
          value: '时间',
          vtype: 'time'
        },
        {
          type: 'userName',
          value: '姓名'
        },
        {
          type: 'phone',
          value: '电话'
        },
        {
          type: 'lifes',
          value: '贷款周期'
        },
        {
          type: 'money',
          value: '贷款金额'
        },
        {
          type: 'isReturn',
          value: '是否还款'
        },
      ],
      tableData: []
    }
  },
  methods: {
    changePn(num) {
      this.pn = num
      this.preGetUserList({
        pn: num
      })
    },
    handleParams () {
      let tempObj = {}
      for (let key in this.searchForm) {
        if (this.searchForm[key] !== '' && key !== 'pn') {
          if (key.indexOf('time') >= 0) {
            if (this.searchForm[key] && this.searchForm[key].length) {
              tempObj['beginDate'] = this.searchForm[key][0]
              tempObj['endDate'] = this.searchForm[key][1]
            }
          } else {
            tempObj[key] = this.searchForm[key]
          }
        }
      }
      return tempObj
    },
    // obj转query
    parseParams (data) {
      var tempArr = []
      for (let key in data) {
        if (data.hasOwnProperty(key)) {
          tempArr.push(key + '=' + data[key])
        }
      }
      return tempArr.join('&')
    },

    preGetUserList (data) {
      this.pn = Number(data.pn) || 1;
      Object.keys(data).forEach(item => {
        if (item !== 'pn' && data[item]) {
          this.searchForm[item] = item.indexOf('time') < 0
            ? data[item]
            : data[item].toString().split(',');
        }
      });
      let param = this.handleParams()
      let searchData = Object.assign(param, {
        pn: this.pn,
        rn: this.rn
      })
      this.$service.get('http://api.dingwealth.com/users/list', searchData)
        .then(res => {
          this.tableData = res.list
          this.total = res.total
        }, error => {
          console.log('---', error)
        })
    }
  },
  created() {
    // this.preGetUserList({})
  }
}
</script>
